<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章管理</title>
    <link rel="stylesheet" href="../../../static/libs/layui/css/layui.css">
    <link rel="stylesheet" href="../../../static/css/commom.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_157670_u6wws8lumx.css" media="all" />
</head>

<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <select id="sltKey">
                                <option value="">搜索条件</option>
                                <option value="title">标题</option>
                                <option value="realname">用户名</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <input id="edtDate" class="layui-input date-icon" type="text" placeholder="请选择日期范围">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <input id="edtSearch" class="layui-input" type="text" placeholder="输入关键字">
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn">
                            <i class="layui-icon layui-icon-search"></i>搜索
                        </button>
                        <button id="btnAdd" class="layui-btn icon-btn">
                            <i class="layui-icon layui-icon-add-1"></i>添加
                        </button>
                       <!-- <button id="delAll_btn" class="layui-btn layui-btn-danger icon-btn">
                            <i class="layui-icon layui-icon-delete"></i>批量删除
                        </button>-->
                    </div>
                </div>
            </div>
            <table class="layui-table" id="userTable" lay-filter="userTable"></table>
        </div>
    </div>
</div>

<!-- 文章列表 -->
<script type="text/html" id="newAdd">
    <div class="layui-fluid ">
        <div class="layui-form layui-row layui-col-space10" id="newsform" lay-filter="newsform">
            <input name="id" hidden>
            <div class="layui-col-md9 layui-col-xs12">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md9 layui-col-xs7">
                        <div class="layui-form-item magt3">
                            <label class="layui-form-label">文章标题</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input newsName" name="title" lay-verify="newsName"
                                       placeholder="请输入文章标题">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">内容摘要</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容摘要" name="abstractContent"
                                          class="layui-textarea abstract"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-xs5">
                        <div class="layui-upload-list thumbBox mag0 magt3">
                            <img class="layui-upload-img thumbImg">
                        </div>
                        <input name="thumbimg" id="thumbimg" hidden>
                    </div>
                </div>
                <div class="layui-form-item magb0">
                    <label class="layui-form-label">文章内容</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea layui-hide" name="content" lay-verify="content"
                                  id="news_content"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3 layui-col-xs12">
                <blockquote class="layui-elem-quote title"><i class="layui-icon layui-icon-template-1"></i> 分类目录
                </blockquote>
                <div class="border category">
                    <div class="catalogs">
                        <!--<p><input type="checkbox" name="goods[good]" value="1" title="新闻" lay-skin="primary"/></p>
                        <p><input type="checkbox" name="goods[new]" value="2" title="商品" lay-skin="primary"/></p>
                        <p><input type="checkbox" name="goods[sss]" value="3" title="公告" lay-skin="primary"/></p>
                        <p><input type="checkbox" name="goods[wa]" value="4" title="图片" lay-skin="primary"/></p>-->
                    </div>
                </div>
                <blockquote class="layui-elem-quote title magt10"><i class="layui-icon">&#xe609;</i> 发布</blockquote>
                <div class="border">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i class="layui-icon">&#xe60e;</i> 状　态</label>
                        <div class="layui-input-block newsStatus">
                            <select name="status" lay-verify="required">
                                <option value="0">保存草稿</option>
                                <option value="1">等待审核</option>
                                <option value="2">审核通过</option>
                                <option value="3">审核不通过</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单图标</label>
                        <div class="layui-input-block">
                            <input name="icon" id="icon" placeholder="请输入菜单图标" type="text" class="layui-input" />
                            <em class="layui-icon layui-icon-set-sm parameter-icon"></em>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><i class="layui-icon">&#xe609;</i> 发　布</label>
                        <div class="layui-input-block">
                            <input type="radio" name="release" title="立即发布" lay-skin="primary" lay-filter="release"
                                   checked/>
                            <!--<input type="radio" name="release" title="定时发布" lay-skin="primary" lay-filter="release"/>-->
                        </div>
                    </div>
                    <div class="layui-form-item layui-hide releaseDate">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="release" placeholder="请选择日期和时间" readonly/>
                        </div>
                    </div>
                    <div class="layui-form-item openness">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-chat"></i> 公开度</label>
                        <div class="layui-input-block">
                            <input type="radio" value="0" name="access" title="开放浏览" lay-skin="primary" checked/>
                            <input type="radio" value="1" name="access" title="私密浏览" lay-skin="primary"/>
                        </div>
                    </div>
                    <div class="layui-form-item stick">
                        <label class="layui-form-label"><i class="layui-icon layui-icon-note"></i> 置　顶</label>
                        <div class="layui-input-block">
                            <input type="checkbox" id="stick" name="stick" lay-skin="switch" lay-text="是|否">
                        </div>
                    </div>
                    <hr class="layui-bg-gray"/>
                    <div class="layui-right">
                        <a class="layui-btn layui-btn-sm" lay-filter="addNews" lay-submit><i
                                class="layui-icon">&#xe609;</i>发布</a>
                        <a class="layui-btn layui-btn-primary layui-btn-sm" lay-filter="look" lay-submit>预览</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<!-- 文章表格操作列 -->
<script type="text/html" id="tableBar">
    {{# if(d.status!="2"&&d.status!=null){}}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="pass">通过</a>
    {{# }}}
    {{# if(d.status!="3"){}}
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="noPass">不通过</a>
    {{# }}}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <!--<a class="layui-btn layui-btn-xs" lay-event="look">预览</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="comment">查看文章评论</a>
</script>
<!-- 评论表格操作列 -->
<script type="text/html" id="commentBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 表格状态列 -->
<script type="text/html" id="tbaleState">
    <input type="checkbox" lay-filter="ckState" value="{{d.userId}}" lay-skin="switch" lay-text="是|否"
           {{d.state==0?'checked':''}}/>
</script>
<!-- 文章列表 -->
<script type="text/html" id="commentList">
    <table class="layui-table" id="commentTable" lay-filter="commentTable"></table>
</script>
<script type="text/html" id="dialogIcon">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-12">
                        <blockquote class="layui-elem-quote">【点击可复制】可选择你想配置的外部图标</blockquote>
                        <textarea id="copyText"></textarea>
                        <ul class="icons layui-row"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<!--审核状态-->
<script type="text/html" id="newsStatus">
    {{#  if(d.status == "1"){ }}
    <span class="layui-red">等待审核</span>
    {{#  } else if(d.status == "0"){ }}
    <span class="layui-blue">已存草稿</span>
    {{#  } else if(d.status == "3"){ }}
    <span class="layui-red">审核不通过</span>
    {{#  } else { }}
    审核通过
    {{#  }}}
</script>
<script src="../../../static/libs/layui/layui.js"></script>
<script src="../../../static/js/common.js"></script>
<script>
    layui.use(['layer', 'table', 'form', 'util', 'laydate', 'layedit', "admin", "upload"], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var util = layui.util;
        var laydate = layui.laydate;
        var layedit = layui.layedit;
        var upload = layui.upload;
        var admin = layui.admin;
        //渲染表格
        var insTb = table.render({
            elem: '#userTable',
            // url: '../../static/json/newsList.json',
            url: '/blogArticleController/getBlogArticle',
            page: true,
            cellMinWidth: 100,
            cols: [
                [
                    {type: "checkbox", fixed: "left", width: 50},
                    // {field: 'newsId', title: 'ID', width:60, align:"center"},
                    {field: 'title', title: '文章标题', width: 350},
                    {field: 'realname', title: '发布者', align: 'center'},
                    {field: 'status',sort:true, title: '发布状态', align: 'center', templet: "#newsStatus"},
                    {
                        field: 'access', title: '浏览权限', align: 'center', templet: function (d) {
                            if (d.access != 1) {
                                return '开放浏览';
                            } else {
                                return '私密浏览';
                            }
                        }
                    },
                    {
                        field: 'stick',sort:true, title: '是否置顶', align: 'center', templet: function (d) {
                            if (d.stick != 1) {
                                return '<input  type="checkbox" value="' + d.id + '" name="stick"  lay-filter="stick" checked lay-skin="switch" lay-text="是|否" ' + d.stick + '>'
                            } else {
                                return '<input  type="checkbox"  value="' + d.id + '" name="stick"  lay-filter="stick"  lay-skin="switch" lay-text="是|否" ' + d.stick + '>'
                            }
                        }
                    },
                    {
                        field: 'createTime', title: '发布时间', align: 'center', minWidth: 110, templet: function (d) {
                            return d.createTime.substring(0, 10);
                        }
                    },
                    {title: '操作', width: 350, templet: '#tableBar', fixed: "right", align: "center"}
                ]
            ]
        });
        // 时间范围
        laydate.render({
            elem: '#edtDate',
            type: 'date',
            range: true,
            theme: 'molv'
        });
        // 添加按钮点击事件
        $('#btnAdd').click(function () {
            showEditModel();
        });
        // 批量删除
        $("#delAll_btn").click(function () {
            var checkStatus = table.checkStatus('userTable'),
                data = checkStatus.data,
                newsId = [];
            if (data.length > 0) {
                for (var i in data) {
                    newsId.push(data[i].newsId);
                }
                layer.confirm('确定删除选中的文章？', {icon: 3, title: '提示信息', shade: 0.1}, function (index) {
                    // $.get("删除文章接口",{
                    //     newsId : newsId  //将需要删除的newsId作为参数传入
                    // },function(data){
                    insTb.reload();
                    layer.close(index);
                    // })
                })
            } else {
                layer.msg("请选择需要删除的文章");
            }
        })
        // 模糊搜索
        function search() {
            var key = $('#sltKey').val();
            var value = $('#edtSearch').val();
            // 赋值搜索条件隐藏域
            $('#s_sltKey').val(key);
            $('#s_edtSearch').val(value);
            table.reload('categoryTable', {
                where: {
                    queryKey: key,
                    queryValue: value
                },
                page: {
                    curr: 1
                }
            });
        }
        // 搜索按钮点击事件
        $('#btnSearch').click(function () {
            var key = $('#sltKey').val();
            var searchDate = $('#edtDate').val().split(' - ');
            var searchAccount = $('#edtSearch').val();
            var data = {
                startDate: searchDate[0],
                endDate: searchDate[1]
            };
            data[key] = searchAccount;
            table.reload('userTable', {
                where: data,
                page: {
                    curr: 1
                }
            });
        });
        // 列表操作
        table.on('tool(userTable)', function (obj) {
            var layEvent = obj.event,
                data = obj.data;

            if (layEvent === 'edit') { //编辑
                showEditModel(data);
            } else if (layEvent === 'del') { //删除
                layer.confirm('确定删除此文章？', {icon: 3, title: '提示信息', shade: 0.1}, function (index) {
                    $.get("/blogArticleController/deleteBlogArticleById", {
                        id: data.id  //将需要删除的newsId作为参数传入
                    }, function (data) {
                        insTb.reload();
                        layer.close(index);
                    })
                });
            } else if (layEvent === 'look') { //预览
                layer.alert("此功能需要前台展示，实际开发中传入对应的必要参数进行文章内容页面访问", {shade: 0.1})
            }else if (layEvent === 'comment') { //预览
                showCommentList(data.id);
            }else if (layEvent === 'pass') { //通过
                layer.confirm('确定通过此文章？', {icon: 3, title: '提示信息', shade: 0.1}, function (index) {
                    updateBlogArticleStatus(data.id, 2);
                });
            }else if (layEvent === 'noPass') { //不通过
                layer.confirm('确定不通过此文章？', {icon: 3, title: '提示信息', shade: 0.1}, function (index) {
                    updateBlogArticleStatus(data.id, 3);
                });
            }
        });
        // 文章状态改变
        function updateBlogArticleStatus(id,status){
            $.post('/blogArticleController/updateBlogArticleStatus', {
                id: id,
                status: status
            },function (res) {
                if (res.success) {
                    layer.msg(res.msg,{icon:1});
                    insTb.reload();
                } else {
                    layer.msg(res.msg,{icon:2});
                }
            });
        }
        //是否置顶
        form.on('switch(stick)', function (data) {
            var id = $(this).val();
            var index = layer.msg('修改中，请稍候', {icon: 16, time: false, shade: 0.1});
            $.get('/blogArticleController/updateBlogArticleTop', {
                id: id,
                stick: data.elem.checked ? 0 : 1
            }, function (res) {
                setTimeout(function () {
                    layer.close(index);
                    if (res.success) {
                        layer.msg("置顶成功！");
                    } else {
                        layer.msg("取消置顶成功！");
                    }
                    insTb.reload();
                }, 500);
            }, 'json');
        })

        // 显示编辑弹窗
        function showEditModel(mUser) {
            layer.open({
                type: 1,
                skin: 'layui-admin-skin-w',
                area: ['100%', '100%'],
                title: (mUser ? '修改' : '添加') + '文章',
                scrollbar: false,
                content: $("#newAdd").html(),
                success: function (layero, dIndex) {
                    var url = mUser ? '/blogArticleController/updateBlogArticle' : '/blogArticleController/insertBlogArticle';
                    var checked = false;
                    $.get("/blogArticleController/getAllBlogClassify", function (res) {
                        var listData = res.data;
                        var html = "";
                        for (var i = 0; i < listData.length; i++) {
                            var checked = "";
                            if (mUser) {
                                if (mUser.catalogs) {
                                    var ids = mUser.catalogs.split(",");
                                    for (var j = 0; j < ids.length; j++) {
                                        if (ids[j] == listData[i].id) {
                                            checked = "checked";
                                            break;
                                        }
                                    }
                                }
                            }
                            html += "<p><input " + checked + " type=\"checkbox\" name=\"catalogs\" value=\"" + listData[i].id + "\" title=\"" + listData[i].classifyName + "\" lay-skin=\"primary\"/></p>"
                        }
                        $(".catalogs").empty();
                        $(".catalogs").append(html);
                        if (mUser) {
                            // 回显数据
                            $(".thumbImg").attr("src", mUser.thumbimg);
                            if (mUser.stick != 1) {
                                checked = true;
                            }
                        }
                        // 回显数据
                        form.val('newsform', mUser);
                        $("input[id='stick']").prop("checked", checked);
                        form.render('checkbox');
                        //创建一个编辑器
                        var editIndex = layedit.build('news_content', {
                            height: 535,
                            uploadImage: {
                                url: "/imgUpload/imUploadLayedit"
                            }
                        });
                        //用于同步编辑器内容到textarea
                        layedit.sync(editIndex);
                        //上传缩略图
                        /*upload.render({
                            elem: '.thumbBox',
                            url: '../../static/json/userface.json',
                            method : "get",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
                            done: function(res, index, upload){
                                var num = parseInt(4*Math.random());  //生成0-4的随机数，随机显示一个头像信息
                                $('.thumbImg').attr('src',res.data[num].src);
                                $('.thumbBox').css("background","#fff");
                            }
                        });*/
                        upload.render({
                            elem: '.thumbBox',
                            url: '/imgUpload/imgload',
                            method: "post",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
                            done: function (res, index, upload) {
                                var num = parseInt(4 * Math.random());  //生成0-4的随机数，随机显示一个头像信息
                                /* $('#userFace').attr('src', res.data.urlLoad);
                                 $('#headImg').val(res.data.urlLoad);*/
                                $('.thumbImg').attr('src', res.data.urlLoad);
                                $('#thumbimg').val(res.data.urlLoad);
                                $('.thumbimg').css("background", "#fff");
                            }
                        });

                        //格式化时间
                        function filterTime(val) {
                            if (val < 10) {
                                return "0" + val;
                            } else {
                                return val;
                            }
                        }
                        // icon弹窗显示
                        function showIcon() {
                            layer.open({
                                type: 1,
                                skin: 'layui-admin-skin-w',
                                title: '复制icon',
                                shade: [0.1, '#000'],
                                btn: ['确定'],
                                area:["100%","100%"],
                                content: $("#dialogIcon").html(),
                                success: function (layero, dIndex) {
                                    var iconUrl = '//at.alicdn.com/t/font_157670_u6wws8lumx.css';
                                    $.get(iconUrl, function (data) {
                                        var iconHtml = '';
                                        for (var i = 1; i < data.split(".icon-").length; i++) {
                                            iconHtml += "<li class='layui-col-xs4 layui-col-sm3 layui-col-md2 layui-col-lg1'>" +
                                                "<i class='iconfont icon-" + data.split(".icon-")[i].split(":before")[0] + "'></i>" +
                                                "icon-" + data.split('.icon-')[i].split(':before')[0] +
                                                "</li>";
                                        }
                                        $(".icons").html(iconHtml);
                                        $(".iconsLength").text(data.split(".icon-").length - 1);
                                    })
                                    $("body").on("click",".icons li",function(){
                                        var layui_class = $(this).children("i").attr("class");
                                        var copyText = document.getElementById("copyText");
                                        copyText.innerText = $(this).children("i").attr("class");
                                        $("#icon").val(layui_class);
                                        layer.close(dIndex);
                                        /*copyText.select();
                                        document.execCommand("copy");
                                        layer.msg("复制成功",{anim: 2});*/
                                    })
                                }
                            })
                        }
                        $(".parameter-icon").click(function () {
                            showIcon();
                        })
                        //定时发布
                        var time = new Date();
                        var submitTime = time.getFullYear() + '-' + filterTime(time.getMonth() + 1) + '-' + filterTime(time.getDate()) + ' ' + filterTime(time.getHours()) + ':' + filterTime(time.getMinutes()) + ':' + filterTime(time.getSeconds());
                        laydate.render({
                            elem: '#release',
                            type: 'datetime',
                            trigger: "click",
                            done: function (value, date, endDate) {
                                submitTime = value;
                            }
                        });
                        form.verify({
                            newsName: function (val) {
                                if (val == '') {
                                    return "文章标题不能为空";
                                }
                            },
                            content: function (val) {
                                if (layedit.getContent(editIndex) == '') {
                                    return "文章内容不能为空";
                                }
                            }
                        });
                        form.on("radio(release)", function (data) {
                            if (data.elem.title == "定时发布") {
                                $(".releaseDate").removeClass("layui-hide");
                                $(".releaseDate #release").attr("lay-verify", "required");
                            } else {
                                $(".releaseDate").addClass("layui-hide");
                                $(".releaseDate #release").removeAttr("lay-verify");
                                submitTime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate() + ' ' + time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds();
                            }
                        });
                        form.on("submit(addNews)", function (data) {
                            var catalogs = "";
                            $(".catalogs input:checkbox[name='catalogs']:checked").each(function (i) {
                                catalogs += "," + $(this).val();
                            });
                            data.field.catalogs = catalogs;
                            data.field.content = layedit.getContent(editIndex);
                            data.field.stick = $("input[id='stick']").prop("checked") ? 0 : 1;
                            //截取文章内容中的一部分文字放入文章摘要
                            var abstract = layedit.getText(editIndex).substring(0, 50);
                            //弹出loading
                            var index = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.1});
                            $.post(url, data.field, function (res) {
                                layer.closeAll('loading');
                                if (res.success) {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    insTb.reload({}, 'data');
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }, 'json');
                            return false;
                        })
                    }, 'json');
                }
            })
        }

        // 文章评论模块
        function  showCommentList(id) {
            layer.open({
                type: 1,
                skin: 'layui-admin-skin-w',
                area: ['100%', '100%'],
                title: '文章评论',
                scrollbar: false,
                content: $("#commentList").html(),
                success: function (layero, dIndex) {
                    //渲染表格
                    var insTbComment = table.render({
                        elem: '#commentTable',
                        url: '/blogArticleController/getBlogComment',
                        where:{
                            pkArticle:id
                        },
                        page: true,
                        cellMinWidth: 100,
                        cols: [
                            [
                                {type: "checkbox", fixed: "left", width: 50},
                                // {field: 'newsId', title: 'ID', width:60, align:"center"},
                                {field: 'fromName', title: '评论人', width: 350},
                                {field: 'toName', title: '被评论人', align: 'center'},
                                {field: 'content', title: '内容', align: 'center'},
                                {
                                    field: 'createTime', title: '评论', align: 'center', minWidth: 110, templet : "<div>{{layui.util.toDateString(d.createTime, 'yyyy年MM月dd日,HH:mm:ss')}}</div>"
                                },
                                {title: '操作', width: 100, templet: '#commentBar', fixed: "right", align: "center"}
                            ]
                        ]
                    });
                    // 列表操作
                    table.on('tool(commentTable)', function (obj) {
                        var layEvent = obj.event,
                            data = obj.data;
                      if (layEvent === 'del') { //删除
                            layer.confirm('确定删除此评论？', {icon: 3, title: '提示信息', shade: 0.1}, function (index) {
                                $.get("/blogArticleController/deleteBlogCommentById", {
                                    id: data.id  //将需要删除的newsId作为参数传入
                                }, function (data) {
                                    insTbComment.reload();
                                    layer.close(index);
                                })
                            });
                        }
                    });
                }
            });
        }


    })
</script>
</body>

</html>